<template>
  <a-row id="globalHeader" align="center" :wrap="false">
    <a-col flex="auto">
      <a-menu
        mode="horizontal"
        v-model:selectedKeys="current"
        theme="light"
        @select="onSelect"
      >
        <a-menu-item
          key="0"
          :style="{ padding: 0, marginRight: '150px', marginLeft: '20px' }"
          disabled
        >
          <div class="titleBar">
            <img class="logo" src="../assets/logo.png" />
            <div class="title">枸杞工具箱</div>
          </div>
        </a-menu-item>
        <a-menu-item v-for="item in items" :key="item.key">
          {{ item.title }}
        </a-menu-item>
      </a-menu>
    </a-col>
    <a-col flex="100px">
      <a-menu
        :selectedKeys="selectedKeys"
        style="color: black"
        mode="horizontal"
        :items="avatar"
        theme="light"
        @click="onUserInfoSelect"
      />
      <!--      <div>-->
      <!--        <a-button type="primary" href="/user/login">登录</a-button>-->
      <!--      </div>-->
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { h, ref } from "vue";
import {
  AppstoreOutlined,
  HomeOutlined,
  SettingOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { userLogout } from "@/api/user";

const router = useRouter();
const route = useRoute();
const current = ref([route.path]);
const selectedKeys = ref([]);

const items = ref([
  {
    key: "/index",
    icon: () => h(HomeOutlined),
    label: "首页",
    title: "首页",
  },
  {
    key: "/manager",
    icon: () => h(AppstoreOutlined),
    label: "管理工具",
    title: "管理工具",
  },
  {
    key: "/forum",
    icon: () => h(AppstoreOutlined),
    label: "论坛",
    title: "论坛",
  },
  {
    key: "/author",
    icon: h(UserOutlined),
    label: h(
      "a",
      {
        href: "http://yuque.com/dogqi",
        target: "_blank",
      },
      "作者主页"
    ),
    title: "作者主页",
  },
]);
// 选中菜单触发事件
const onSelect = (item: any, key: any, selectedKeys: any) => {
  if (item.key == "/author") {
    window.open("https://www.yuque.com/dogqi", "_blank");
  } else {
    router.push(item.key);
  }
};

const avatar = ref([
  {
    key: "info",
    icon: () => h(SettingOutlined),
    label: "用户",
    title: "用户",
    children: [
      {
        key: "person",
        label: "个人中心",
      },
      {
        key: "my_tools",
        label: "我的工具",
      },
      {
        key: "logout",
        label: "注销登录",
      },
    ],
  },
]);

const onUserInfoSelect = (item: any, key: any, selectedKeys: any) => {
  if (item.key === "logout") {
    userLogout()
      .then((res: any) => {
        if (res.code == 0) {
          message.success("注销成功");
          sessionStorage.removeItem("userAccount");
          router.push("/login");
        } else {
          message.error("注销失败，" + res.message);
        }
      })
      .catch((err: any) => {
        message.error(err.message);
      });
  } else {
    router.push(item.key);
  }
  //清除选中的菜单
  selectedKeys = [];
};
</script>

<style scoped>
#globalHeader {
}

.titleBar {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 16px;
  color: black;
}

.logo {
  height: 48px;
}
</style>
